<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
		<!-- 
		  父传子:
		  1.在子组件的标签中通过v-bind绑定一个自定义属性,属性的值是父组件中数据的key
		  2.在子组件中通过props属性接收在v-bind中绑定的自定义属性名
		    类型限制,
			是否必传
			默认值
		  3.传递数据可以是:
		    简单数据
			数组
			对象
		-->
	</head>
	<body>
		<div id="app">
			<father></father>
		</div>
		<template id="father">
			<div>
				<h3>父组件:{{name}}</h3>
				<son :fname="name" :fage="age" :fstu="stu"></son>
			</div>
		</template>
		<template id="son">
			<div>
				<h5>子组件</h5>
				<h5>这是父组件传递的数据:{{fname}},{{fage + 11}}</h5>
				<h6>父组件传递的对象数据:{{fstu.sex}}</h6>
			</div>
		</template>
		<script type="text/javascript">
			let vm = new Vue({
				el: '#app',
				components: {
					father: { //父组件
						name: 'father', //组件名
						template: '#father',
						data() {
							return {
								name: "父的名字",
								age: 30,
								stu: {
									id: 1,
									sex: '男'
								}
							}
						},
						components: {
							son: { //子组件
								template: '#son',
								//简单声明接收
								// props: ['fname', 'fage']
								//接收数据的同时对数据类型进行限制
								/* props: {
									fname: String,
									fage: Number
								} */
								props: {
									fname: {
										type: String, //类型限制
										required: true, //必须传
									},
									fage: {
										type: Number,
										default: 20 //默认值
									},
									fstu: {
										type: Object
									}
								}
							}
						}
					}
				}
			})
		</script>
	</body>
</html>
